<template>
  <div class="main">
    <div class="notice-bar">
      <div class="textarea">
        <div class="textarea-title">
          <el-input
            type="textarea"
            placeholder="请输入公告标题"
            v-model="title"
            :maxlength="titleLength"
            show-word-limit
          >
          </el-input>
        </div>
        <div class="textarea-content">
          <el-input
            type="textarea"
            autosize
            placeholder="请输入公告内容"
            v-model="content"
            show-word-limit
            :maxlength="contentLenfth"
            style=""
          >
          </el-input>
        </div>
        <div class="btns">
          <img src="@img/clear.svg" alt="" @click="clear" title="清除所有" />
          <img
            style="margin-left: 10px"
            src="@img/finished.svg"
            alt=""
            title="提交"
            @click="finished"
          />
        </div>
      </div>
    </div>
    <div class="calender">
      <el-calendar></el-calendar>
    </div>
  </div>
</template>

<script>
import { postNotice } from "@/network/manager";
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      title: "",
      content: "",
      titleLength: 36,
      contentLenfth: 300,
    };
  },
  methods: {
    ...mapMutations(["setNotice"]),
    post() {
      const { title, content } = this;
      postNotice({ title, content }).then((res) => {
        if (res.data.tag) {
          this.$message.success("发布成功");
          this.clear();
        } else {
          this.$message.error("发布失败");
        }
        console.log(res, "res");
      });
    },
    clear() {
      this.title = "";
      this.content = "";
    },
    finished() {
      this.$confirm("立即发布该公告?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await this.post();
        })
        .catch(() => {
          this.$message.warning("已取消");
        });
    },
  },
  activated() {
    this.setNotice("发布公告");
  },
};
</script>

<style scoped>
.main {
  position: relative;
  height: 86vh;
  width: 100%;
}

.notice-bar {
  height: 100%;
  overflow: hidden;
  background: url("../../../assets/img/notice.jpg") no-repeat;
  /* background-size: 100% 88vh; */
  background-size: 100% 100%;
  /* background-size: contain; */
  /* background-size: cover; */
  /* background-attachment: fixed; */
  /* background-attachment:fixed; */
  width: 100%;
}

.calender {
  width: 360px;
  position: absolute;
  top: 10px;
  right: 10px;
}
/deep/ .el-calendar-day {
  height: 100%;
}

.textarea {
  /* height: 100%; */
  box-sizing: content-box;
  padding: calc(88vh * 0.24) calc(100% * 0.28) calc(88vh * 0.185)
    calc(100% * 0.2775);
}

.textarea > .btns {
  width: 100%;
  text-align: right;
}

/deep/ .textarea-content {
  height: 280px;
  overflow: auto;
}
/deep/ textarea {
  background: none;
  resize: none;
  outline: none;
  border: none;
}

/deep/ .textarea-content textarea {
  text-align: left;
  font-size: 18px;
}

/deep/ .textarea-title textarea {
  font-weight: bold;
  text-align: center;
  font-size: 20px;
}

@media screen and (max-width: 1600px) {
  .calender {
    /* padding: 1rem 3rem; */
    display: none;
  }

  /deep/ .textarea-content textarea {
    text-align: left;
    font-size: 10px;
  }

  /deep/ .textarea-title textarea {
    font-weight: bold;
    text-align: center;
    font-size: 12px;
  }

  /deep/ .textarea-content {
    height: 250px;
  }
}
</style>

<style>

</style>
